<!--
 * @Author: “Jackson” “1145239633@qq.com”
 * @Date: 2025-09-23 11:15:23
 * @LastEditors: “Jackson” “1145239633@qq.com”
 * @LastEditTime: 2025-09-23 11:15:35
 * @FilePath: \shaangu-web\src\views\components\DocxViewer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="docx-viewer">
    <div ref="container" class="docx-container"></div>
  </div>
</template>

<script>
import { renderAsync } from 'docx-preview'
import axios from 'axios'

export default {
  name: 'DocxViewer',
  props: {
    fileUrl: String
  },
  watch: {
    fileUrl: {
      immediate: true,
      handler(newUrl) {
        if (newUrl) {
          this.loadDocx()
        }
      }
    }
  },
  methods: {
    async loadDocx() {
      try {
        this.$emit('loading', true)

        const response = await axios.get(this.fileUrl, {
          responseType: 'arraybuffer'
        })

        const blob = new Blob([response.data], {
          type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })

        await renderAsync(blob, this.$refs.container)
        this.$emit('loading', false)
      } catch (error) {
        console.error('Error loading DOCX:', error)
        this.$emit('error', '加载Word文档失败: ' + error.message)
        this.$emit('loading', false)
      }
    }
  }
}
</script>

<style scoped>
.docx-viewer {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.docx-container {
  padding: 20px;
  background: white;
  min-height: 500px;
}

/* docx-preview 生成的样式 */
.docx-container ::v-deep .docx-wrapper {
  background: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.docx-container ::v-deep .docx-wrapper > section.docx {
  margin: 0 auto;
  max-width: 800px;
}
</style>
